<template>
  <div>
 <div v-show="show">
   <van-field label="姓名" v-model="datas.name"/>
   <van-field label="身份证号" v-model="datas.id_number"/>
   <van-field label="年龄" v-model="datas.age"/>
   <van-field label="性别" v-model="datas.gender"/>
   <van-field label="手机号" v-model="datas.mobile"/>
   上传身份证正反面：
   <van-cell-group>
     <van-uploader :after-read="upload"/>
   </van-cell-group>
   <div v-for="i in imgs" :key="i">
     <img :src="url+i" >
   </div>

   <van-button @click="add">提交</van-button>
 </div>
    <div v-show="show_two">
      <addcard></addcard>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import addcard from "@/components/addcard";

export default {
  data(){
    return{
      user_id:1,
      imgsrc:'',
      imgs:[],
      url:'http://localhost:5000/static/',
      datas:{},
      show:false,
      show_two:false

    }
  },
  components:{
    addcard:addcard
  },
  methods:{
    add(){
      this.datas['imgs'] = this.imgs
      this.datas['user_id'] = localStorage.getItem('usrid')
      axios.post('http://localhost:5000/openbank',this.datas).then(res=>{
        console.log(res.data);
        localStorage.setItem('account_one',1)
      })
    },
    // 上传文件
    upload:function(file){
      // 定义表单参数
      let data = new FormData()
      // 将文件添加到表单
      data.append('file',file.file)
      data.append('id',localStorage.getItem('id'))
      // 建立请求对象
      const myaxios = axios.create({withCredentials:false})
      // 发起请求
      myaxios({
        method:"post",
        url:'http://localhost:5000/upload',
        data:data
      }).then(res=>{
        console.log(res);
        if(res.data.code == 200){
          this.$toast.success("上传成功")
          // 将图片路径保存到网页数据库内
          localStorage.setItem('img','http://localhost:5000/static/'+res.data.filename)
          this.imgs.push(res.data.filename)
          // 刷新当前页面
          // this.$router.go(0)
          // 拼接文件名
          this.imgsrc = 'http://localhost:5000/static/'+res.data.filename
        }
      })
    }
  },
  mounted() {
   if (localStorage.getItem('account_one')==0){
     this.show=true
     this.show_two=false
   }else {
     this.show=false
     this.show_two=true
   }
  }
}
</script>

<style>

</style>
